// vuex从main.js中分离出来
// 第一步 下载、引入、注册vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 第二步 new一个store实例,记得暴露出去，任何组件都可以访问
export default new Vuex.Store({
    state: {
        // 1、定义一个数组，用来存储购物车里所有商品的信息，每件商品信息为一个对象
        shopCar: [],
        count: 0
    },
    mutations: {
        // 2、点击添加购物车时，更新shopcar数据，若已存在这个商品，则只更新件数，若不存在新添加的该商品，则插入数组中
        // 注意：先定义函数的逻辑，在调用方法
        updateCar(state, addgoods) {
            // 定义一个标识，假如便利到相同的商品了，就修改标识，若标识没被修改，说明没有此商品
            let flag = true;
            state.shopCar.some(item => {
                if (item.id == addgoods.id) {
                    item.count += addgoods.count;
                    flag = false;
                }
            });
            if (flag) {
                state.shopCar.push(addgoods);
            }
            console.log(state.shopCar);

            // 当页面一刷新，store中的数据就没有了，所以可以搞个接口将数据保存到数据库，这里我们存在本地存储里
            // 然后页面已加载，首先获取本地存储的数据，赋值给state.shopCar
            localStorage.setItem('shopcar', JSON.stringify(state.shopCar));
        },
        // 页面已加载，首先获取本地存储的数据，赋值给state.shopCar
        innitShopcar(state, innitarr) {
            state.shopCar = innitarr;
        },
        // 点击加减购物车页面的数字框，更新store和本地存储的数据数量
        updateShopcar(state, updateCount) {
            state.shopCar.some(item => {
                if (item.id == updateCount.id) {
                    item.count = updateCount.count;
                }
            })

            // 把更新过的store中购物车数据同步到localStorage中
            localStorage.setItem('shopcar', JSON.stringify(state.shopCar));
        },
        updateSelected(state, upselected) {
            state.shopCar.some(item => {
                if (item.id == upselected.id) {
                    item.selected = upselected.selected
                }
            })

            // 把更新过的store中购物车数据同步到localStorage中
            localStorage.setItem('shopcar', JSON.stringify(state.shopCar));
        },
        // 点击删除按钮，修改store和内存的值
        // bug:如何删除数组中某一项，循环时把索引一起循环splice(i,1)
        delCar(state, id) {
            state.shopCar.some((item, i) => {
                if (item.id == id) {
                    state.shopCar.splice(i, 1)
                    return true
                }
            })
            localStorage.setItem('shopcar', JSON.stringify(state.shopCar));
        }

    },
    getters: {
        // 购物车图标里的数字等于所有购物车商品和，所以包装出一个count值
        getCarCount(state) {
            return state.shopCar.length
        },
        // 购物车页面一刷新，把件数同步到input框里
        innitCount(state) {
            // 新建一个空对象，将购物车里商品id和对应count值组成键值对，存入对象中{‘88’：11，‘89’：5，‘90’：8}
            let innit = {};
            state.shopCar.forEach(item => {
                innit[item.id] = item.count;
            })
            return innit;
        },
        // 创建一个对象，存储switch按钮的id和selected状态
        innitSwitch(state) {
            let selected = {};
            state.shopCar.forEach(item => {
                selected[item.id] = item.selected;
            })
            return selected;
        },
        // 包装出总购物车商品总价钱
        // [ {id: "88", count: 2, price: 5780, selected: true}, 
        //   {id: "87", count: 7, price: 2195, selected: true}  ]
        getAllprice(state) {
            let allpri = 0;
            state.shopCar.forEach(item => {
                if (item.selected) {
                    allpri += item.count * item.price
                }
            })
            return allpri
        },
        // 包装总数量
        getAllCount(state) {
            let d = 0;
            state.shopCar.forEach(item => {
                if (item.selected) {
                    d += item.count;
                }
            });
            return d;
        },
    }
})